<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div id="app">
    <div class="qdhome-center">
      <div class="qdhome-header">
        <div class="qdhome-header-img">
          <img
            src="../../static/icon/fontIcon/1.jpg"
            alt="港口生产安全智能问答助手"
            class="logo"
          />
        </div>
        <div class="qdhome-header-h2">
          <h2>你好，我是港口生产安全智能问答助手</h2>
        </div>
        <div class="qdhome-header-p">
          <p>请随时向我提问，我将竭力保障您的港口作业安全</p>
        </div>
      </div>
      <div class="message-input-container">
        <textarea
          v-model="inputText"
          placeholder="给 港口生产安全智能问答助手 发送消息"
          rows="1"
          @keyup.enter="send"
          @input="inputTextarea"
          @keydown="handleKeyDown"
        ></textarea>

        <!-- <div class="function-buttons">
        <button class="function-btn" @click="toggleDeepThought">深度思考 (R1)</button>
        <button class="function-btn" @click="toggleWebSearch">联网搜索</button>
      </div> -->
        <div class="send-actions">
          <!-- <el-button @click="wenjian" class="button-icon-home">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-wenjian"></use>
            </svg>
          </el-button> -->

          <el-tooltip
            class="item"
            effect="dark"
            content="请输入你的问题"
            placement="top"
            ref="tooltipRef"
          >
            <el-button
              @click="send"
              class="button-icon-home"
              :disabled="isDisabled"
            >
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-tijiao4"></use>
              </svg>
            </el-button>
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import MessageList from '@/components/MessageList.vue';
// import axios from 'axios';

export default {
  components: {},
  data() {
    return {
      inputText: "",
      isDisabled: true,
      inputTextBaseData: this.$route.params.baseData.trim() || "",
    };
  },
    watch: {
    inputTextBaseData: {
      immediate: true,
      deep: true,
      handler: function (val) {
        console.log(val,'ssss');
        this.inputText=val
        this.send()
      },
    },
  },
  methods: {
    send() {
      if (this.inputText.trim().length >= 1) {
        this.$router.push({
          name: "dialogmodel",
          params: {
            baseData: this.inputText,
          },
        });
      }
    },
    wenjian() {
      console.log(2);
    },
    inputTextarea() {
      if (this.inputText.length >= 1) {
        this.isDisabled = false;
      }
    },
    handleKeyDown(event) {
      if (event.key === "Enter" && this.inputText.trim() === "") {
        event.preventDefault();
        this.$refs.tooltipRef.show();
      }
    },
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.el-button {
  border: none;
  margin: 0;
}
.logo {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
}
.iconfont {
  width: 40px;
  height: 40px;
  font-size: 30px;
}

textarea {
  width: 100%;
  height: 100px;
  border-radius: 4px;
  resize: none;
  font-size: 20px;
  /* 去除边框 */
  border: none;
  /* 去除选中后的边框 */
  outline: none;
  background: rgb(243 244 246;);
}
.qdhome-center {
  position: absolute;
  top: 35%;
  left: 45%;
  transform: translate(-35%, -45%);
  .qdhome-header-img {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .qdhome-header-h2 {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .qdhome-header-p {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
  }
}
.message-input-container {
  border: 1px solid #dce0e9;
  border-radius: 24px;
  width: 600px;
  background: rgb(243 244 246;);
  .send-actions {
    display: flex;
    justify-content: right;
    align-items: center;
    .button-icon-home {
      background: rgb(243 244 246;);
      margin-right: 10px;
    }
  }
}
.icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>